<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background: pink;
        }

        .son {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 事件只能由自身触发，无法由冒泡触发 -->
        <div class="father" @click.self="fn1">
            <!-- .stop阻止冒泡 -->
            <div class="son" @click.stop="fn2"></div>
            <!-- .once只能执行一次事件 -->
            <button @click.once="fn3">一次就好</button>
            <!-- .prevent 阻止默认 a就是跳转 加.prevent就不跳转了 -->
            <!-- 可以叠加，没有顺序 -->
            <a href="http://www.baidu.com" @click.prevent.stop="fn4">点我</a>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "",
                }
            },
            methods: {
                fn1() {
                    alert('father被点了')
                },
                fn2() {
                    alert('son被点了')
                },
                fn3() {
                    alert('一次就好')
                },
                fn4() {
                    alert('a被点了')
                }
            }
        })
    </script>
</body>

</html>